<template>
  <q-pagination
    v-model="data.page"
    :max="total"
    direction-links
    boundary-links
    color="primary"
    max-pages="10"
    active-design="unelevated"
  >
  </q-pagination>
</template>

<script>
import { computed, defineComponent, reactive } from "vue";

export default defineComponent({
  name: "ComponentsCommonPaginationVue",
  props: {
    page: Number,
    total: Number,
  },
  emits: ["update:page"],
  setup(props, { emit }) {
    const data = reactive({
      page: computed({
        get: () => props.page,
        set: (val) => emit("update:page", val),
      }),
    });
    return { data };
  },
});
</script>
